<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../public/layui/css/layui.css">
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <!-- <script src="../public/layui/layui.all.js"></script> -->
    <script src="../public/layui/layui.js"></script>
    <title>考试</title>
</head>

<body>
    <ul style="text-align: right;padding-right: 100px" class="layui-nav">
        <li class="layui-nav-item"><a href=""><?=$row['cname']?></a></li>
        <li class="layui-nav-item" style="width: 400px;text-align: center;">
            <div class="time-item" style="padding-top: 8px;">
                <span id="hour_show">02时</span>
                <span id="minute_show">00分</span>
                <span id="second_show">00秒</span>
            </div>
        </li>
        <li class="layui-nav-item"><a href="index.php" id="delks">退出考试</a></li>
    </ul>
    <div class="content" id="content"
        style="margin: 0px auto;width: 980px;margin-top: 10vh;border: 1px solid #eeeeee;border-radius: 5px;overflow: hidden;height: 600px;">
        <?php
        foreach ($rows as $key => $value) {
        ?>
        <div class="both" style="height: 600px;position:relative;" sid="<?=$value['id']?>" key="<?=$key?>"
            type="<?=$value['type']?>">
            <?php 
            if($value['type']=='单选'){

            ?>
            <div type="<?=$value['type']?>">
                <div style="padding-top: 30px;padding-left: 20px;">
                    <div class="layui-card" style="box-shadow:none;">
                        <div class="layui-card-header" style="font-size: 15px;line-height: 10px;">
                            <div style="display: flex; justify-content: space-between;align-items: baseline  ;">
                                <div>
                                    <span style="margin-left: 20px;">题型:<?=$value['type']?></span>
                                    <span style="margin-left: 20px;">考点:<?=$value['points']?></span>
                                    <span style="margin-left: 20px;">加入时间:<?=$value['addtime']?></span>
                                </div>
                                <span>难度:<div id="diff<?=$value['id']?>"></div></span>
                            </div>
                        </div>
                        <div class="layui-card-body" style="border: none;margin-top: 10px;font-size: 30px;">
                            <?=$value['stem']?>
                        </div>
                    </div>
                    <div>
                        <form class="layui-form" action="">
                            <?php
                                $v1=rand(5, 15);
                                $v2=rand(5, 15);
                                $v3=rand(5, 15);
                            ?>
                            <div class="layui-form-item" style="padding-left: 40px;" id="dx<?=$value['id']?>">
                                <input type="radio" name="<?=$value['type']?>" value="<?=$v1?>"
                                    title="<?=$v1?>"><br><br>

                                <input type="radio" name="<?=$value['type']?>" value="<?=$v2?>"
                                    title="<?=$v2?>"><br><br>
                                <input type="radio" name="<?=$value['type']?>" value="<?=$v3?>"
                                    title="<?=$v3?>"><br><br>
                            </div>
                            <!-- <div class="layui-form-item" style="position: absolute;left: 45%;bottom: 50px;">
                            <div class="layui-input-block" style="margin-left:0px;">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">交卷</button>
                            </div>
                        </div> -->
                        </form>
                    </div>
                </div>
                <script>
                    var cs = '#dx' + `<?=$value['id']?>`;
                    var html = `<br><br><input type="radio" name="<?=$value['type']?>" value="<?=$value['resourcesinfo']?>" title="<?=$value['resourcesinfo']?>">`;
                    $(cs).children('input').eq(Math.floor((Math.random() * 2))).after(html);

                </script>
            </div>
            <?php }?>
            <?php 
            if($value['type']=='简答'){
            ?>
            <div type="<?=$value['type']?>">
                <div style="padding-top: 30px;padding-left: 20px;">
                    <div class="layui-card" style="box-shadow:none;">
                        <div class="layui-card-header" style="font-size: 15px;line-height: 10px;">
                            <div style="display: flex; justify-content: space-between;align-items: baseline  ;">
                                <div>
                                    <span style="margin-left: 20px;">题型:<?=$value['type']?></span>
                                    <span style="margin-left: 20px;">考点:<?=$value['points']?></span>
                                    <span style="margin-left: 20px;">加入时间:<?=$value['addtime']?></span>
                                </div>
                                <span>难度:<div id="diff<?=$value['id']?>"></div></span>
                            </div>
                        </div>
                        <div class="layui-card-body" style="border: none;margin-top: 10px;font-size: 30px;">
                            <?=$value['stem']?>
                        </div>
                    </div>
                    <div>
                        <form class="layui-form" action="">
                            <div class="layui-form-item" style="padding-left: 40px;margin-top: 40px;">
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block" style="margin-left:0px;margin-right: 40px;">
                                        <textarea placeholder="请输入内容" class="layui-textarea" name="<?=$value['type']?>"
                                            style="min-height: 300px;"></textarea>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
            <?php }?>
            <?php 
            if($value['type']=='多选'){
            ?>
            <div>
                <?php
                    $dxstr=$value['resourcesinfo'];
                    $dxstrs=explode('-',$dxstr);
                    $dxc=count(explode('-',$dxstr));
                    $arr=array();
                    for($i=0;$i<$dxc;$i++){
                        strtotime("now").mt_rand(1000,9999);
                        $arr[$i]=rand(5, 15);
                    }
                ?>

                <div style="padding-top: 30px;padding-left: 20px;">
                    <div class="layui-card" style="box-shadow:none;">
                        <div class="layui-card-header" style="font-size: 15px;line-height: 10px;">
                            <div style="display: flex; justify-content: space-between;align-items: baseline ;">
                                <div>
                                    <span style="margin-left: 20px;">题型:<?=$value['type']?></span>
                                    <span style="margin-left: 20px;">考点:<?=$value['points']?></span>
                                    <span style="margin-left: 20px;">加入时间:<?=$value['addtime']?></span>
                                </div>
                                <span>难度:<div id="diff<?=$value['id']?>"></div></span>
                            </div>
                        </div>

                        <div class="layui-card-body" style="border: none;margin-top: 10px;font-size: 30px;">
                            <?=$value['stem']?>
                        </div>
                    </div>

                    <div>
                        <form class="layui-form" action="" style="margin-top: 40px;">
                            <div class="layui-form-item">

                                <div class="layui-input-block" style="margin-left: 40px;" id="dxss<?=$value['id']?>">
                                    <?php
                                        foreach ($arr as $val) {
                                    ?>
                                    <input type="checkbox" name="<?=$value['type']?>" lay-skin="primary" title="<?=$val?>"
                                        value="<?=$val?>"></br></br>
                                    <?php }?>
                                    <script>
                                        var dxstr = `<?=$value['resourcesinfo']?>`;
                                        var dxsarr = dxstr.split('-');
                                        for (var i = 0; i < dxsarr.length; i++) {
                                            var cs = '#dxss' + `<?=$value['id']?>`;
                                            var html = `</br></br><input type="checkbox" name="<?=$value['type']?>" lay-skin="primary" title="${dxsarr[i]}" value="${dxsarr[i]}">`;
                                            $(cs).children('input').eq(Math.floor((Math.random() * (i+1)))).after(html);
                                        }
                                            // 
                                    </script>
                                </div>
                            </div>

                        </form>
                    </div>

                </div>

            </div>
            <?php }?>
            <?php 
            if($value['type']=='应用题'){
            ?>
            <div type="<?=$value['type']?>">
                <div style="padding-top: 30px;padding-left: 20px;">
                    <div class="layui-card" style="box-shadow:none;">
                        <div class="layui-card-header" style="font-size: 15px;line-height: 10px;">
                            <div style="display: flex; justify-content: space-between;align-items: baseline  ;">
                                <div>
                                    <span style="margin-left: 20px;">题型:<?=$value['type']?></span>
                                    <span style="margin-left: 20px;">考点:<?=$value['points']?></span>
                                    <span style="margin-left: 20px;">加入时间:<?=$value['addtime']?></span>
                                </div>
                                <span>难度:<div id="diff<?=$value['id']?>"></div></span>
                            </div>
                        </div>
                        <div class="layui-card-body" style="border: none;margin-top: 10px;font-size: 30px;">
                            <?=$value['stem']?>
                        </div>
                    </div>
                    <div>
                        <form class="layui-form" action="">
                            <div class="layui-form-item" style="padding-left: 40px;margin-top: 40px;">
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block" style="margin-left:0px;margin-right: 40px;">
                                        <textarea placeholder="请输入内容" class="layui-textarea" name="<?=$value['type']?>"
                                            style="min-height: 300px;"></textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="layui-form-item" style="position: absolute;left: 45%;bottom: 50px;">
                            <div class="layui-input-block" style="margin-left:0px;">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">交卷</button>
                            </div>
                        </div> -->
                        </form>

                    </div>
                </div>
            </div>
            <?php }?>
        </div>

        <script>
            layui.use(['rate'], function () {
                var rate = layui.rate;
                rate.render({
                    elem: "#diff<?=$value['id']?>"
                    , value: "<?=$value['difficulty']?>"
                    , readonly: true
                });
            });
        </script>
        <?php }?>
    </div>
    <button type="button" class="layui-btn" style="position:fixed;left:48%;bottom:20vh;display: none;"
        id="btnsub">交卷</button>
    <div style="text-align: center;margin-top: 100px;">
        <div id="test1">
        </div>
    </div>
    <style>
        .layui-nav .layui-nav-item a {
            font-size: 25px;
        }

        .time-item span {
            color: #fff;
            line-height: 49px;
            font-size: 36px;
            font-family: Arial;
            padding: 0 10px;
            margin-right: 10px;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
    </style>
    <script>
        // const endTime = parseInt(120 * 60);
        // const endTime = parseInt(10);
        var tmer;
        let pageIndex = 0;
        const count = parseInt("<?=$counts?>");
        const kcid = "<?=$id?>";
        let listobj = new Array(count);
        // listobj = $.map(listobj, (item) => {
        //     return {
        //         id: '',
        //         data: {},
        //         cid: ''
        //     }
        // })

        // var intDiff = parseInt(parseInt("<?=$row['time']?>") * 60);
        var intDiff = parseInt(parseInt(2 * 60 * 60));

        function timer(intDiff) {

            tmer = window.setInterval(function () {
                var day = 0, hour = 0, minute = 0, second = 0;//时间默认值        
                if (intDiff >= 0) {
                    // day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                } else {
                    alert("考试时间到，请退出考试");
                    clearInterval(tmer);
                    location.href = "index.php";
                }
                if (hour <= 9) hour = '0' + hour;
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                // $('#day_show').html(day + "天");
                $('#hour_show').html('<s></s>' + hour + '时');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                intDiff--;
            }, 1000);
        }
        $(function () {
            timer(intDiff);
            $("#delks").on('click', function () {
                alert("是否退出考试");
            })
        });
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'test1'
                , count: count
                , prev: "上一题"
                , next: "下一题"
                , limit: 1
                , groups: count
                , first: false
                , last: false
                , jump: function (obj, first) {
                    if (first) {
                        return;
                    }
                    if (obj.curr == obj.count) {
                        $('#btnsub').show()
                    } else {
                        $('#btnsub').hide()
                    }
                    //判断题型
                    switch ($(".both").eq(pageIndex).attr('type')) {
                        case '多选':
                            {
                                var val = $(".both").eq(pageIndex).find('form').serializeArray();
                                var arr = val.map((item, index) => {
                                    return item.value
                                })
                                var str = Object.values(arr).join('-')
                                listobj[pageIndex] = {
                                    id: pageIndex,
                                    data: {
                                        name: "多选",
                                        value: str,
                                    },
                                    cid: parseInt($(".both").eq(pageIndex).attr('sid'))

                                };

                            }
                            ; break;
                        case '简答':
                            { }
                            ;
                        case '应用题':
                            { }
                            ;
                        case '单选':
                            {
                                var data = $(".both").eq(pageIndex).find('form').serializeArray()[0];
                                if (!data) {
                                    data = {
                                        name: "单选",
                                        value: ''
                                    }
                                }
                                listobj[pageIndex] = {
                                    id: pageIndex,
                                    data: data,
                                    cid: parseInt($(".both").eq(pageIndex).attr('sid'))
                                }
                            }
                            ; break;
                    }

                    console.log(listobj)
                    var ids = obj.curr - 1;
                    pageIndex = ids;
                    $('#content').scrollTop(ids * 600);
                }
            });
        });
        layui.use(['rate', 'form'], function () {
            var form = layui.form;
            var rate = layui.rate;
            form.on('submit(formDemo)', function (data) {
                // var ids = parseInt($(data.form).parent().parent().parent().attr("key"));
                // $('#content').scrollTop((ids + 1) * 600);

                return false;
            });
            rate.render({
                elem: '#test9'
                , value: 4
                , readonly: true
            });
        });
        $('#btnsub').on('click', function (e) {
            //先保存答案

            switch ($(".both").last().attr('type')) {
                case '多选':
                    {
                        var val = $(".both").last().find('form').serializeArray();
                        var arr = val.map((item, index) => {
                            return item.value
                        })
                        var str = Object.values(arr).join('-')
                        listobj[count - 1] = {
                            id: count - 1,
                            data: {
                                name: "多选",
                                value: str,
                            },
                            cid: parseInt($(".both").last().attr('sid'))

                        };

                    }
                    ; break;
                case '简答':
                    { }
                    ;
                case '应用题':
                    { }
                    ;
                case '单选':
                    {
                        var data = $(".both").last().find('form').serializeArray()[0];
                        if (!data) {
                            data = {
                                name: "单选",
                                value: ''
                            }
                        }
                        listobj[count - 1] = {
                            id: count - 1,
                            data: data,
                            cid: parseInt($(".both").last().attr('sid'))
                        }
                    }
                    ; break;
            }


            layer.alert(e, {
                title: ' 提示：',
                content: " <h2>是否提交试卷？</h2>",
                area: '500px',
                btn: ['确定', '取消'],
                yes: function () {
                    var ii = layer.load(1);
                    $.ajax({
                        type: "post",
                        url: "comm/hand.php",
                        data: {
                            data: JSON.stringify(listobj),
                            cid: kcid
                        },
                        success: function (res) {
                            res = JSON.parse(res);
                            console.log(res)
                            if (res.code == 200) {
                                alert("分数为" + res.info)
                                clearInterval(tmer);
                                location.href = "index.php";
                                layer.close(ii);
                            } else {
                                layer.msg(res.info, { icon: 5, time: 1000 });
                            }
                            layer.close(ii);
                        },
                        error: function (err) {
                            layer.msg('程序异常!', { icon: 5, time: 1000 });
                        }
                    });
                }
            });
        })

        document.onkeydown = function (e) {
            e = window.event || e;
            var k = e.keyCode;
            //屏蔽ctrl+R，F5键，ctrl+F5键  F3键！验证
            if ((e.ctrlKey == true && k == 82) || (k == 116)
                || (e.ctrlKey == true && k == 116) || k == 114) {
                e.keyCode = 0;
                alert("当前页面不能刷新！");
                e.returnValue = false;
                e.cancelBubble = true;
                return false;

            }
            // if (k == 8) {
            //     alert("不能返回或后退！");
            //     e.keyCode = 0;
            //     e.returnValue = false;
            //     return false;
            // }
            //屏蔽 Ctrl+n   验证可以实现效果
            if (e.ctrlKey && k == 78) {
                e.keyCode = 0;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
            }
            //屏蔽F11   验证可以实现效果
            if (k == 122) {
                e.keyCode = 0;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
            }
            //屏蔽 shift+F10  验证可以实现效果      
            if ((e.shiftKey && k == 121) || (e.ctrlKey && k == 121)) {
                e.keyCode = 0;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
            }

            //屏蔽Alt+F4  
            if ((e.altKey) && (k == 115)) {
                window.showModelessDialog("about:blank", "",
                    "dialogWidth:1px;dialogheight:1px");
                e.keyCode = 0;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
            }
            //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
            if ((e.altKey)
                && ((k == 37) || (k == 39))) {
                alert("不准你使用ALT+方向键前进或后退网页！");
                e.keyCode = 0;
                e.returnValue = false;
                e.cancelBubble = true;
                return false;
            }

        };

        //屏蔽右键菜单，！验证
        document.oncontextmenu = function (event) {
            if (window.event) {
                event = window.event;
            }
            try {
                var the = event.srcElement;
                if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                    return false;
                }
                return true;
            } catch (e) {
                return false;
            }
        };
        window.onbeforeunload = function (e) {
            e.returnValue = false;
            return false;
        };
    </script>
</body>

</html>